<template>
  <section v-if="podCategoryId">
    <v-stepper alt-labels :items="['设计', '模板', '设置','完成']" v-model="step">
      <template v-slot:item.1>
              <skuGroup :podCategoryId="podCategoryId" v-model:model-value="form.skuGroup" />
      </template>
      <template v-slot:item.2>
          <v-card title="图片模板" style="height: 600px;" flat>
              <OssUploadDropZone v-model:fileUrls="form.images" />
          </v-card>
      </template>
      <template v-slot:item.3>
          <v-card title="商品信息" flat>
              <VForm ref="formRef">
                  <VCardText>
                      <VRow>
                      <VCol  cols="12" md="6">
                          <AppTextField
                          v-model="form.name"
                          label="商品标题"
                          placeholder="XXXXX"
                          :rules="formRules.name"
                          />
                      </VCol>
                      <VCol  cols="12" md="6">
                          <AppSelect
                              label="商品分类"
                              v-model="form.groupId"
                              :placeholder="商品分类"
                              :items="GOODS_GROUP_SELECT"
                              :rules="formRules.groupId"
                          />
                      </VCol>
                      <VCol cols="12">
                          <span class="mb-1">商品描述</span>
                          <ProductDescriptionEditor
                          v-model="form.description"
                          placeholder="XXXXXXXXXX"
                          class="border rounded"
                          />
                      </VCol>
                      </VRow>
                  </VCardText>
              </VForm>
          </v-card>
      </template>
      <template v-slot:item.4>
          <v-card flat style="height: 600px;">
              <v-empty-state icon="$success">
                  <template v-slot:media>
                  <v-icon color="surface-variant"></v-icon>
                  </template>

                  <template v-slot:headline>
                  <div class="text-h4">
                      创建成功
                  </div>
                  </template>

                  <template v-slot:title>
                  <div class="text-h6">
                      商品创建成功之后可以在商品列表查看
                  </div>
                  </template>

                  <template v-slot:text>
                  <div class="text-medium-emphasis text-caption">
                      请耐心等待系统处理此次创建的商品,稍后查看
                  </div>
                  </template>
                  <template v-slot:actions>
                      <v-btn @click="reset"
                          class="text-none"
                          elevation="1"
                          rounded="lg"
                          size="small"
                          text="再次创建"
                          width="96"
                          color="primary"
                      ></v-btn>
                      <v-btn @click="goList"
                          class="text-none"
                          elevation="1"
                          rounded="lg"
                          size="small"
                          text="查看列表"
                          width="96"
                          color="secondary"
                      ></v-btn>
                  </template>
              </v-empty-state>
          </v-card>
      </template>
      <template v-slot:actions="{prev, next}">
          <VStepperActions v-if="step == 3" prev-text="返回" next-text="创建" :disabled="false" @click:prev="prev">
              <template v-slot:next="{}">
                  <VBtn
                    :loading="loading"
                    @click.stop="handleSubmit"
                  ></VBtn>
              </template>
          </VStepperActions>
          <VStepperActions v-else-if="step != 4" prev-text="返回" next-text="下一步" @click:prev="prev" @click:next="next"/>
      </template>
    </v-stepper>
  </section>
  <section v-else>
    <v-empty-state
        action-text="返回"
        icon="tabler-search"
        text="您的连接或我们的服务器可能存在问题。请检查您的互联网连接或稍后重试。感谢您的耐心等待。"
        headline="出了点问题"
        title="请稍后重新尝试"
        @click:action="router.back()"
      ></v-empty-state>
  </section>


</template>

<script setup>
import skuGroup from './components/skuGroup.vue';
import OssUploadDropZone from '@/components/OssUploadDropZone.vue';
import { useRoute,useRouter } from 'vue-router';
import { listGoodsGroup,addGoods } from '@/api/mes/goods';

const {proxy} = getCurrentInstance()

const route = useRoute()
const router = useRouter()

const loading = ref(false)

const podCategoryId = computed({
  get: () => route.query.id,
  set: () => route.query.id,
})
const step = ref(0)

const GOODS_GROUP_SELECT = ref([])
listGoodsGroup().then(res => {
  GOODS_GROUP_SELECT.value = res.data.map(item => {
    return {
      title: item.name,
      value: item.id,
    }
  })
})

const reset = () =>{
  router.go(0)
}

const goList = () => {
  router.push({name:'tenant-center',query:{tab:'goods'}})
}


const form = ref({
    name:undefined,
    description:undefined,
    groupId: undefined,
    image: undefined,
    images: [],
    skuGroup:{
        podCategoryId: podCategoryId.value,
        sn: new Date().getTime(),
        frontImageId: "",
        backImageId: "",
        frontImage: "",
        backImage: "",
        skuList: [],
  }
})

const formRef = ref()


const formRules = {
  name:[
    v=>!!v || "商品标题不能为空"
  ],
  groupId:[
    v=>!!v || "请选择商品分类"
  ],
}

const handleSubmit = async () => {
  const { valid } = await formRef.value.validate()
  if (!valid) {
    return
  }
  if (!form.value.description) {
    proxy.$toast.error("商品描述不能为空");
    return
  }
  if (form.value.images.length == 0) {
    proxy.$toast.error("主图模板至少上传1张图");
    return
  }
  form.value.image = form.value.images[0]
  loading.value = true
  await addGoods(form.value).finally(()=>loading.value = false)
  step.value = 4
}


</script>